<!DOCTYPE html>
<head>

    <meta charset="UTF-8">
    <title>管理员登录</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <style>
        body {
            background-color: #00f7de;
            /*width: 100%;
            height: 100%;
            background-image: url("111.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;*/
        }
        .layui-form {
            width: 400px;
            margin: 0px auto;
            margin-top: 250px;
            background-color: #FFF;
            padding-bottom: 30px;
            border-radius: 20px;
        }
        h1{
            text-align: center;
            padding: 30px;
        }

    </style>
</head>
<body>

<form class="layui-form">
    <h1>管理员登录</h1>
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入账号"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <Label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" placeholder="请输入密码"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-inline" style="width: 80px">
            <input type="text" name="vercode" placeholder="验证码"
                   class="layui-input">
        </div>
        <div>
            <img src="/vercode" id="vercode" style="cursor: pointer">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="login">登录</button>
        </div>
    </div>
</form>


<script>
    layui.use(['form'], function (){
        var form = layui.form,
            $ = layui.$;

        // 刷新验证码
        $('#vercode').click(function() {
            $(this).attr("src", "/vercode?t=" + new Date().getTime());
        });

        form.on('submit(login)', function (data){

            $.ajax({
                url: '/api/admin/login',
                data: data.field,
                type: 'post',
                dataType: 'json',
                success: function (result){
                    if (result.code == 0) {
                        // 登录成功
                        // 跳转到主页面
                        window.location.href = '/';
                    } else {
                        layer.msg(result.msg);
                        // 输入验证码的框清空，并重新形成验证码
                        $('input[name="vercode"]').val('');
                        $('#vercode').attr('src', '/vercode?t=' + new Date().getTime());
                    }
                },
                error: function (){
                    layer.msg("登录失败");
                }
            });

            // 阻止表单自动提交
            return false;
        });
    });
</script>

</body>
